<template>
    <div class="block"> 
        <div class="info_block" >
            <el-descriptions class="margin-top" title="个人中心"  border>
                <template slot="extra">
                    <el-button type="primary" size="small">上传头像</el-button>
                </template>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                </template>
                {{ userinfo.username}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                {{ userinfo.telephone}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    邮箱
                </template>
                {{ userinfo.email}}
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    备注
                </template>
                <el-tag size="small" v-if="userinfo.description == 2">管理员</el-tag>
                <el-tag size="small" v-else>普通用户</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    头像
                </template>
                    <div>
                        <el-avatar shape="square"  :src="userinfo.handleImage"></el-avatar>
                    </div>
                </el-descriptions-item>
            </el-descriptions>

        </div>
        <el-divider></el-divider>
        <div class="info_block">
            <el-descriptions class="margin-top" title="角色信息" border>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    拥有角色
                </template>
                kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    角色状态
                </template>
                18100000000
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        角色信息
                    </template>
                    苏州市
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <el-divider></el-divider>
        <div class="info_block">
            <el-descriptions class="margin-top" title="账号基本信息"  border>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    上次登录时间
                </template>
                kooriookami
                </el-descriptions-item>
                <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    上次登录地址
                </template>
                18100000000
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        最后一次修改密码
                    </template>
                    苏州市
                </el-descriptions-item>
            </el-descriptions>
        </div>                
    </div>
</template>

<script>
import user from '../../api/user'
export default {
    name:"personalCenter",
    data(){
        return{
            userinfo:'',
        }
    },
    created(){
        this.checkUser();
    },
    mounted(){

    },
    methods:{
        //查看用户
        async checkUser(){
            const res=await user.selectUserByUserId({userId:this.$store.getters.userId});
            if(res.data.code=== '000'){
                this.cheakUserData=res.data.data;
                this.userinfo = res.data.data
            }
        },
    }
}
</script>

<style scoped >
.info_block{
    margin-top: 50px;
    margin-bottom: 50px;
}
</style>
